<template>
  <section class="toolbar">
    <el-tooltip
      placement="bottom"
      v-for="command in commands"
      :key="command.name"
      :content="command.title"
    >
      <div class="item" @click="handleCommandClick(command.name)">
        <span><i class="iconfont" :class="command.icon"></i></span>
      </div>
    </el-tooltip>
  </section>
</template>

<script>
import { commands } from './graph/commands'
import EventBus from './EventBus'
import BusEvents from './EventBus/events'

export default {
  name: 'TopToolbar',
  data() {
    return {
      commands: commands,
    }
  },
  methods: {
    handleCommandClick(command) {
      switch (command) {
        case 'undo':
          EventBus.$emit(BusEvents.CommandUndo)
          break
        case 'redo':
          EventBus.$emit(BusEvents.CommandRedo)
          break
        case 'copy':
          EventBus.$emit(BusEvents.CommandCopy)
          break
        case 'cut':
          EventBus.$emit(BusEvents.CommandCut)
          break
        case 'paste':
          EventBus.$emit(BusEvents.CommandPaste)
          break
        case 'delete':
          EventBus.$emit(BusEvents.CommandDelete)
        case 'print':
          EventBus.$emit(BusEvents.CommandPrint)
          break
        default:
          break
      }
    },
  },
}
</script>

<style lang="less" scoped>
section.toolbar {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-left: 10px;

  display: flex;
  flex-direction: row;
  align-items: center;

  .item {
    font-size: 16px;
    margin: 0 2px;
    padding: 2px 8px;
    border-radius: 2px;
    cursor: pointer;

    &:hover {
      background-color: #dddddd;
    }
  }
}
</style>
